<template>
    <div class="rx-mobile-js-custom">
        <div
            style="overflow: hidden;height:calc( 100% - 74px );border-bottom: 1px solid #e6e8eb;border-top: 1px solid #e6e8eb;">
            <rx-monaco-editor
                ref="mobileScript"
                v-model="mobileScript"
                language="javascript"
                style="height:1000px;"
            >
                <template v-slot:monacoeditor>
                    <div style="display: flex;align-items: center;height: 100%">
                        <a-dropdown>
                            <a-menu slot="overlay">
                                <a-menu-item v-for="(obj,index) in commonJsLib" :key="index" @click="clickCommon(obj)">
                                    {{ obj.name }}
                                </a-menu-item>
                            </a-menu>
                            <a-button style="margin-right: 8px">{{ i18n('isButton.insertFunc', '插入函数') }}
                                <a-icon type="down"/>
                            </a-button>
                        </a-dropdown>

                        <rx-common-script @select="insertScript" use-to="list-mobileJs" type="2">
                            <template v-slot:button>
                                <a-button style="margin-right: 8px">
                                    {{ i18n('isButton.insertCode', '插入代码') }}
                                    <a-icon type="down"/>
                                </a-button>
                            </template>
                        </rx-common-script>
                    </div>
                </template>
            </rx-monaco-editor>
        </div>
    </div>
</template>

<script>
import {Dialog, RxMonacoEditor, RxCommonScript} from "@lowcode/jpaas-common-lib"

export default {
    name: "mobileJsCustom",
    props: {
        value: {}
    },
    emits: ['update:value'],
    components: {
        RxMonacoEditor,
        RxCommonScript
    },
    data() {
        return {
            vm: null,
            commonJsLib: [
                {
                    name: this.i18n('isButton.insertCallScript', '插入调用脚本'),
                    clickEvent: 'insertInvokeMobileScript'
                }, {
                    name: this.i18n('isButton.insertCustomQuery', '插入自定义查询'),
                    clickEvent: 'insertMobileCustomQuery'
                }, {
                    name: this.i18n('isButton.insertInterface', '插入第三方接口'),
                    clickEvent: 'insertInvokeMobileInterface'
                }, {
                    name: this.i18n('isButton.insertLiteFlow', '调用规则引擎'),
                    clickEvent: 'insertLiteFlow'
                },{
                    name: this.i18n('isButton.insertOpenForm', '插入打开表单'),
                    clickEvent: "insertOpenFormScript"
                },{
                    name: '插入打开页面定制',
                    clickEvent: "insertOpenCustomPage"
                }, {name: '插入选中的行', clickEvent: "insertSelectRows"},
            ]
        }
    },
    computed: {
        mobileScript: {
            get() {
                return this.value ? this.value : ''
            },
            set(val) {
                this.$emit('updateMobileScript', val)
            }
        }

    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "customPageColumn", key);
        },
        mobileI18n(name, text, key) {
            return this.$ti18(name, text, "formMobile", key);
        },
        setData(vm, data) {
            this.vm = vm;
            this.mobileScript = data.mobileJs || "";
        },
        getData() {
            return {success: true, data: {mobileJs: this.mobileScript}};
        },
        insertScript(script) {
            this.$refs.mobileScript.insertContent(script);
        },
        clickCommon(obj) {
            if (obj.clickEvent) {
                let clickEvent = obj.clickEvent;
                this[clickEvent]();
            }
        },
        insertInvokeMobileScript() {
            var self_ = this;
            this.vm.insertInvokeScript(function (script) {
                self_.$refs.mobileScript.insertContent(script);
            })
        },
        insertMobileCustomQuery() {
            var self_ = this;
            this.vm.insertCustomQuery(function (script) {
                self_.$refs.mobileScript.insertContent(script);
            })
        },
        insertInvokeMobileInterface() {
            var self_ = this;
            this.vm.insertInvokeInterface(function (script) {
                self_.$refs.mobileScript.insertContent(script);
            })
        },
        insertPostJson() {
            let self_ = this;
            let script = `
            //插入postJson函数
            let params={key:"",}
            this.http.mobilePostJson(url,params).then(res=>{})`;
            self_.$refs.mobileScript.insertContent(script);
        },
        insertGet() {
            let self_ = this;
            let script = `
            //插入get函数,参数可以为空
            //let id='1'
            //url = 'api?id='+this.id'
            this.http.mobileGet(url).then(res=>{})`;
            self_.$refs.mobileScript.insertContent(script);
        },
        insertPostForm() {
            let self_ = this;
            let script = `
            //插入post函数
            let params={key:"",}
            this.http.mobilePost(url,params).then(res=>{})`;
            self_.$refs.mobileScript.insertContent(script);
        },
        /*
        打开表单方案
         */
        insertOpenFormScript() {
            let self_ = this;
            var config = {
                curVm: this,
                max: true,
                data: {params: {}}
            };

            Dialog.openFormDialog(config, (res) => {
                let script = `
                /**
                *'` + self_.mobileI18n("msa.parameter1", "参数1:对话框别名,参数2:对话框名称,参数3:是否只读,") + `'
                *'` + self_.mobileI18n("msa.parameter2", "参数4:主键,参数5:传递到表单数据,") + `'
                *'` + self_.mobileI18n("msa.parameter3", "参数6:回调函数,参数7:保存后是否关闭打开的窗口") + `'
                */
                this.openForm("${res.alias}","${res.name}",false,"",{},function(action,data){
                 console.info(data);
             },true)`;
                self_.$refs.mobileScript.insertContent(script);
            })
        },
        /*
        打开页面定制
        */
        insertOpenCustomPage(){
            let self_ = this;
            let config={
                curVm: this, widthHeight: ['900px', '600px'],
            };
            Dialog.openCustomPageDialog(config,(res)=>{
                let json={};
                let paramDef=res.params || "[]";
                let paramsAry=JSON.parse(paramDef);
                for(let i=0;i<paramsAry.length;i++){
                    let o=paramsAry[i];
                    json[o.value]=o.label;
                }
                let str=JSON.stringify(json);
                res.name = this.$i18(res.name,"名称国际化")
                let script=`/**
                * @param obj
                 * alias： ${this.$comi18('dialog.aliasName','别名')}
                 * params：${ this.$comi18('dialog.param','参数')}
                 * title:${ this.$comi18('dialog.name','名称')}
                 * config:{max:true,shade:true,width:200,height:200)}
                 * callBack：${ this.$comi18('dialog.callback','回调函数')}
                */
                let params=${str};
                this.openCustomPage("${res.alias}",params,"${res.name}",{max:true,shade:true,width:200,height:200},function(action,data){
                console.log(data)
                })
                `;
                self_.$refs.mobileScript.insertContent(script);
            });
        },
        /*
        打开对话框
         */
        insertOpenDialog() {
            let self_ = this;
            Dialog.openFormBoListDialog({
                curVm: this,
                data: {single: true, isDialog: 'YES', isDataGrant: true},
                widthHeight: ['1000px', '600px']
            }, function (self, data, pmtAlias) {
                var obj = data[0];
                var str = "/**\n" +
                    self_.mobileI18n("msa.openDialog", "打开对话框") + "：" + obj.name +
                    " */\n";
                str += "this.openList(\"" + obj.key + "\",{single:" + (obj.multiSelect == "NO") + (pmtAlias ? ",pmtAlias:\"" + pmtAlias + "\"" : "") + "},";
                str += "{max:" + (obj.isMax == "YES") + ",widthHeight:['" + obj.width + "px', '" + obj.height + "px']},function(action,data){\n";
                str += "   //data:" + self_.mobileI18n("msa.selectDialogData", "对话框选择数据") + "\n";
                str += "});";
                self_.$refs.mobileScript.insertContent(str);
            })
        },
        insertSelectRows() {
            let self_ = this;
            let script = `
            //插入选中的行
            let rows =  this.getSelectedRows()`;
            self_.$refs.mobileScript.insertContent(script);
        },
        insertLiteFlow() {
            let self_ = this;
            Dialog.openLiteFlowDialog({
                curVm: this, data: {single: true}, widthHeight: ['900px', '600px']
            },function (data){
                let params= "";
                if(data.inParams){
                    let inParams= JSON.parse(res.inParams)
                    if(inParams.type=="form"){
                        params = inParams.form ? JSON.parse(inParams.form).text +"表单数据格式" : "";
                    }else {
                        params = JSON.stringify(this.changeArrToObj(inParams.params));
                    }
                }
                let script = `
                    /**
                     * 执行规则引擎
                     * liteFlowId 规则引擎Id
                     * params ${params}
                     */
                    let params="";
                   this.executeLiteFlow('${data.pkId}',params).then(res=>{
                   })
                `;
                self_.$refs.mobileScript.insertContent(script);
            })
        },
        changeArrToObj(data) {
            return data.reduce((obj, item) => {
                if(item.paramType=='obj'){
                    obj[item.paramName] = this.changeArrToObj(item.children);
                }else {
                    obj[item.paramName] = item.value;
                }
                return obj;
            },{})
        },
    }
}
</script>

<style scoped>
.rx-mobile-js-custom {
    height: 100%;
}

.rx-mobile-js-custom-toolbar {
    padding-bottom: 10px;
}

.rx-mobile-js-custom-toolbar button {
    margin-right: 10px;
}
</style>